import React from 'react';
import Badge from '../index';
import Icon from '../../icon';
import DemoBlock from '../../../site/components/DemoBlock';
import useDemoTranslate from '../../../site/hooks/use-demo-translate';
import { Dictionary } from '../../utils/interface';
import './basic.less';

const I18N: Dictionary<Dictionary<string>> = {
	'zh-CN': {
		basicUsage: '基础用法',
		max: '最大值',
		customStyle: '自定义样式',
		displayIndependent: '独立展示',
	},
	'en-US': {
		basicUsage: 'Basic usage',
		max: 'Max',
		customStyle: 'Custom Style',
		displayIndependent: 'Display Independent',
	},
};

export default function Basic(): ReturnType<React.FC> {
	const [i18n] = useDemoTranslate(I18N, 'en-US');

	return (
		<div className="demo-badge">
			<DemoBlock title={i18n.basicUsage}>
				<Badge count={5}>
					<div className="child"></div>
				</Badge>
				<Badge count={10}>
					<div className="child"></div>
				</Badge>
				<Badge count={<div className="hot">hot</div>}>
					<div className="child"></div>
				</Badge>
				<Badge dot color="red">
					<div className="child"></div>
				</Badge>
			</DemoBlock>
			<DemoBlock title={i18n.max}>
				<Badge max={9} count={10}>
					<div className="child"></div>
				</Badge>
				<Badge max={20} count={99}>
					<div className="child"></div>
				</Badge>
				<Badge max={99} showZero={false} count={100}>
					<div className="child"></div>
				</Badge>
			</DemoBlock>
			<DemoBlock title={i18n.customStyle}>
				<Badge count="5" color="#1989fa">
					<div className="child"></div>
				</Badge>
				<Badge count="10" color="#1989fa">
					<div className="child"></div>
				</Badge>
				<Badge dot color="#1989fa">
					<div className="child"></div>
				</Badge>
				<div>
					<Badge
						count={
							<Icon
								className="customStyle"
								name="arrow-down"
							></Icon>
						}
					>
						<div className="child"></div>
					</Badge>
					<Badge
						count={
							<Icon
								className="customStyle"
								name="arrow-left"
							></Icon>
						}
					>
						<div className="child"></div>
					</Badge>
					<Badge
						count={
							<Icon
								className="customStyle"
								name="arrow-right"
							></Icon>
						}
					>
						<div className="child"></div>
					</Badge>
				</div>
			</DemoBlock>
			<DemoBlock title={i18n.displayIndependent}>
				<div className="independent">
					<div className="display">
						<Badge count={20} />
					</div>
					<div className="display">
						<Badge max="99" count={100} />
					</div>
				</div>
			</DemoBlock>
		</div>
	);
}
